<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>InsightBlog配置使用示例</title>
    <link href="../../assets/css/tailwind.css" rel="stylesheet">
    <link href="../../assets/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50 font-sans text-gray-800">
    <!-- 导航栏 -->
    <header id="main-header" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500 py-4">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center">
                <!-- Logo -->
                <a href="#" class="flex items-center space-x-3">
                    <div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center shadow-lg">
                        <i class="fa fa-lightbulb-o text-2xl text-blue-600" aria-hidden="true"></i>
                    </div>
                    <span class="text-2xl font-bold text-white text-shadow-enhanced">InsightBlog</span>
                </a>
                
                <!-- 桌面端导航 -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="#" class="insight-nav-link">
                        首页
                        <span class="insight-nav-underline"></span>
                    </a>
                    <a href="#" class="insight-nav-link-inactive">
                        发现
                        <span class="insight-nav-underline"></span>
                    </a>
                    <a href="#" class="insight-nav-link-inactive">
                        分类
                        <span class="insight-nav-underline"></span>
                    </a>
                    <a href="#" class="insight-nav-link-inactive">
                        专栏
                        <span class="insight-nav-underline"></span>
                    </a>
                    <a href="#" class="insight-nav-link-inactive">
                        关于
                        <span class="insight-nav-underline"></span>
                    </a>
                </nav>
                
                <!-- 功能按钮区 -->
                <div class="flex items-center space-x-5">
                    <button class="text-white hover:text-blue-100 transition-colors">
                        <i class="fa fa-search text-xl" aria-hidden="true"></i>
                    </button>
                    <button class="hidden sm:flex items-center space-x-2 bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white px-4 py-2 rounded-full transition-all">
                        <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                        <span>登录</span>
                    </button>
                    <!-- 移动端菜单按钮 -->
                    <button class="md:hidden text-white hover:text-blue-100 transition-colors" id="mobile-menu-btn">
                        <i class="fa fa-bars text-2xl" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
            
            <!-- 移动端导航菜单 -->
            <div class="md:hidden hidden mt-4 bg-white/95 backdrop-blur-md rounded-xl shadow-xl p-4" id="mobile-menu">
                <nav class="flex flex-col space-y-4">
                    <a href="#" class="text-blue-600 font-medium py-2 border-b border-gray-100">首页</a>
                    <a href="#" class="text-gray-700 hover:text-blue-600 font-medium py-2 border-b border-gray-100 transition-colors">发现</a>
                    <a href="#" class="text-gray-700 hover:text-blue-600 font-medium py-2 border-b border-gray-100 transition-colors">分类</a>
                    <a href="#" class="text-gray-700 hover:text-blue-600 font-medium py-2 border-b border-gray-100 transition-colors">专栏</a>
                    <a href="#" class="text-gray-700 hover:text-blue-600 font-medium py-2 transition-colors">关于</a>
                    <button class="flex items-center justify-center space-x-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg transition-all mt-2">
                        <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                        <span>登录 / 注册</span>
                    </button>
                </nav>
            </div>
        </div>
    </header>

    <!-- 英雄区域 -->
    <section class="hero-gradient pt-32 pb-20 md:pt-40 md:pb-32 relative overflow-hidden">
        <!-- 装饰元素 -->
        <div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-10">
            <div class="decoration-circle decoration-circle-1"></div>
            <div class="decoration-circle decoration-circle-2"></div>
            <div class="decoration-circle decoration-circle-3"></div>
        </div>
        
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="max-w-4xl mx-auto text-center">
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight text-shadow-enhanced">
                    使用合并后的配置，<br class="hidden sm:block">展示InsightBlog样式
                </h1>
                <p class="text-xl md:text-2xl text-white/90 mb-10 max-w-2xl mx-auto">
                    展示了如何使用合并后的Tailwind配置和自定义组件样式
                </p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <button class="blog-btn-enhanced blog-btn-enhanced-primary">
                        开始探索
                    </button>
                    <button class="blog-btn-enhanced blog-btn-enhanced-outline">
                        提交文章
                    </button>
                </div>
                
                <!-- 统计数据 -->
                <div class="flex flex-wrap justify-center gap-8 mt-16">
                    <div class="stats-item">
                        <p class="stats-number">10K+</p>
                        <p class="stats-label">优质文章</p>
                    </div>
                    <div class="stats-item">
                        <p class="stats-number">2K+</p>
                        <p class="stats-label">创作者</p>
                    </div>
                    <div class="stats-item">
                        <p class="stats-number">500K+</p>
                        <p class="stats-label">月阅读量</p>
                    </div>
                    <div class="stats-item">
                        <p class="stats-number">30+</p>
                        <p class="stats-label">内容分类</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 波浪分隔符 -->
        <div class="wave-separator">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" class="w-full h-auto">
                <path fill="#f9fafb" fill-opacity="1" d="M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,100L1360,100C1280,100,1120,100,960,100C800,100,640,100,480,100C320,100,160,100,80,100L0,100Z"></path>
            </svg>
        </div>
    </section>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <!-- 特色分类 -->
        <section class="mb-20">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">探索热门分类</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">发现不同领域的精彩内容，从技术创新到生活灵感，总有适合你的主题</p>
            </div>
            
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
                <a href="#" class="category-card card-hover-enhanced">
                    <div class="category-icon category-icon-blue">
                        <i class="fa fa-laptop text-2xl" aria-hidden="true"></i>
                    </div>
                    <h3 class="font-bold text-gray-900">技术</h3>
                    <p class="text-gray-500 text-sm mt-1">2.4K 文章</p>
                </a>
                
                <a href="#" class="category-card card-hover-enhanced">
                    <div class="category-icon category-icon-green">
                        <i class="fa fa-briefcase text-2xl" aria-hidden="true"></i>
                    </div>
                    <h3 class="font-bold text-gray-900">职场</h3>
                    <p class="text-gray-500 text-sm mt-1">1.8K 文章</p>
                </a>
                
                <a href="#" class="category-card card-hover-enhanced">
                    <div class="category-icon category-icon-purple">
                        <i class="fa fa-paint-brush text-2xl" aria-hidden="true"></i>
                    </div>
                    <h3 class="font-bold text-gray-900">设计</h3>
                    <p class="text-gray-500 text-sm mt-1">1.5K 文章</p>
                </a>
                
                <a href="#" class="category-card card-hover-enhanced">
                    <div class="category-icon category-icon-yellow">
                        <i class="fa fa-plane text-2xl" aria-hidden="true"></i>
                    </div>
                    <h3 class="font-bold text-gray-900">旅行</h3>
                    <p class="text-gray-500 text-sm mt-1">1.2K 文章</p>
                </a>
                
                <a href="#" class="category-card card-hover-enhanced">
                    <div class="category-icon category-icon-red">
                        <i class="fa fa-cutlery text-2xl" aria-hidden="true"></i>
                    </div>
                    <h3 class="font-bold text-gray-900">美食</h3>
                    <p class="text-gray-500 text-sm mt-1">980 文章</p>
                </a>
                
                <a href="#" class="category-card card-hover-enhanced">
                    <div class="category-icon category-icon-indigo">
                        <i class="fa fa-book text-2xl" aria-hidden="true"></i>
                    </div>
                    <h3 class="font-bold text-gray-900">阅读</h3>
                    <p class="text-gray-500 text-sm mt-1">850 文章</p>
                </a>
            </div>
        </section>

        <!-- 工具类展示 -->
        <section class="mb-20">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">自定义工具类展示</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">展示合并后的自定义工具类和组件样式的使用效果</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- 卡片悬停效果对比 -->
                <div class="bg-white rounded-xl shadow-card p-8">
                    <h3 class="text-lg font-bold text-gray-900 mb-6">卡片悬停效果对比</h3>
                    <div class="space-y-4">
                        <div class="blog-card p-6">
                            <h4 class="font-bold mb-2">标准卡片悬停</h4>
                            <p class="text-gray-600">使用 .card-hover 类，悬停时向上移动5px</p>
                        </div>
                        <div class="blog-card-enhanced p-6">
                            <h4 class="font-bold mb-2">增强卡片悬停</h4>
                            <p class="text-gray-600">使用 .card-hover-enhanced 类，悬停时向上移动8px，使用弹性缓动</p>
                        </div>
                    </div>
                </div>
                
                <!-- 文本阴影效果 -->
                <div class="bg-white rounded-xl shadow-card p-8">
                    <h3 class="text-lg font-bold text-gray-900 mb-6">文本阴影效果</h3>
                    <div class="space-y-4">
                        <p class="text-shadow text-2xl font-bold text-blog-primary">标准文本阴影</p>
                        <p class="text-shadow-enhanced text-2xl font-bold text-blog-primary">增强文本阴影</p>
                        <p class="text-gray-600 text-sm">左侧使用 .text-shadow，右侧使用 .text-shadow-enhanced</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 颜色主题展示 -->
        <section class="mb-20">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">颜色主题展示</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">展示新增的颜色主题和渐变效果</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-gradient-to-br from-blog-primary to-blog-secondary text-white p-8 rounded-xl">
                    <h3 class="text-xl font-bold mb-4">Blog主题色</h3>
                    <p>使用 blog-primary 和 blog-secondary 颜色</p>
                </div>
                
                <div class="bg-gradient-to-br from-insight-gradient-1 via-insight-gradient-2 to-insight-gradient-3 text-white p-8 rounded-xl">
                    <h3 class="text-xl font-bold mb-4">Insight渐变</h3>
                    <p>使用 insight-gradient 颜色系列</p>
                </div>
                
                <div class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white p-8 rounded-xl">
                    <h3 class="text-xl font-bold mb-4">标准渐变</h3>
                    <p>使用 Tailwind 标准渐变类</p>
                </div>
            </div>
        </section>
    </main>

    <script>
        // 导航滚动效果
        document.addEventListener('DOMContentLoaded', function() {
            const header = document.getElementById('main-header');
            
            window.addEventListener('scroll', function() {
                if (window.scrollY > 100) {
                    header.classList.add('nav-scrolled');
                } else {
                    header.classList.remove('nav-scrolled');
                }
            });
            
            // 移动端菜单切换
            const mobileMenuBtn = document.getElementById('mobile-menu-btn');
            const mobileMenu = document.getElementById('mobile-menu');
            
            mobileMenuBtn.addEventListener('click', function() {
                mobileMenu.classList.toggle('hidden');
            });
        });
    </script>
</body>
</html> 